<template>
    <div class="now_header">
        <div style="width: 28px;display: inline-block" @click = goBack>
            <img style="width: 100%" src="../assets/img/back.png">
        </div>
    </div>
    <div  class="edit_body">
        <div @click="open">
            <el-image style="width: 150px; height: 150px" :src="userinfo.avatar"  fit = "fill"  />
        </div>
          <input type="file"  ref="avatarIn" name = "file"  accept="image/*"   style="display: none;" @change="selectAvatar" />
       <p >
           修改昵称 <span style="font-size: 10px;color: #cf413e">（10个字）</span>
       </p>
        <div>
            <input type="text" v-model="userinfo.nickName" style="text-align: center; font-size: 20px" maxlength="10">
        </div>
        <div style="margin-top: 100px">
            <el-button type="primary"  :icon="Check" @click = "commit_info"  v-loading.fullscreen.lock= common.loading>保存</el-button>
        </div>
    </div>
    <avatar-clip v-if="common.avatarShow" :img-info = "common.imgFile"  @clip_img  = change_avater></avatar-clip>
</template>

<script setup>
import {edit_user, get_user} from "@/axios/login";
import store from '@/store'
import {getCurrentInstance, onMounted, reactive, ref, unref ,nextTick} from "vue";
import {useRouter,useRoute} from 'vue-router'
import avatarImg from "@/assets/img/panda.png";
import {  Check } from '@element-plus/icons-vue'
import AvatarClip from "@/components/avatarClip.vue";


const avatarIn = ref(null);

const { proxy } = getCurrentInstance()

const router = useRouter();
const goBack = ()=>{
    router.push("/")
}

const common = reactive({
    avatarShow :false,
    loading:false,
    imgFile :{}
})

const userinfo = reactive({
    nickName:"",
    avatar: avatarImg
})

const open = () => {
    const input = document.querySelector('input')
    input.click();
};
const selectAvatar = () =>{

    // userinfo.avatar = URL.createObjectURL(file[0])
    nextTick(()=>{
        common.avatarShow = true
        common.imgFile = unref(avatarIn).files[0]
    })
}
const change_avater = (img) =>{
    if(img != 'cancel') {
        userinfo.avatar = img
    }
    common.avatarShow = false
}
const commit_info = () =>{
    common.loading =true
    edit_user(userinfo).then(res =>{
        store.dispatch("refresh_token").then(res=>{
            getUserInfo
            common.loading =false
        }).catch(err =>{
            common.loading =false
        })
        proxy.$message.success("修改成功")
    }).catch(err =>{
        common.loading =false
    })
}
const getUserInfo = () =>{
    get_user().then(res=>{
        userinfo.nickName = res.data.data.nickName
        userinfo.avatar = res.data.data.avatar ? res.data.data.avatar : avatarImg
    }).catch(err=>{

    })

}

onMounted(() => {
    getUserInfo()
})

</script>

<style scoped>
input{
    border-top: none ;
    border-left: none ;
    border-right: none ;
    border-bottom: #9e9e9e 1px solid;
    border-radius: 0px;
}

.now_header{
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: #5195FF;
    color:white;
    text-align: left;
    top: 0;
    left: 0;
    padding: 4px;
    box-sizing:border-box;
}
.edit_body{
    padding: 20px;
    margin-top: 50px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

</style>